<!-- RecordManagement.vue -->
<template>
<div>
  <!-- 搜索栏 -->
  <el-form :model="recordQuery" label-position="right" label-width="100px">
    <el-row :gutter="15">
      <el-col :span="6">
        <el-form-item  label="任务名称">
          <el-input v-model="recordQuery.taskName"/>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="任务创建人">
          <el-input v-model="recordQuery.username"/>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="执行结果">
          <el-input v-model="recordQuery.taskResult"/>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="请求内容">
          <el-input v-model="recordQuery.requestContent"/>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="15">
      <el-col :span="6">
        <el-form-item label="执行日期">
          <el-date-picker
              v-model="taskQuery.executionDate"
              type="date"
              aria-label="Pick a date"
              placeholder="Pick a date"
              style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="执行时间">
          <el-time-picker
              v-model="taskQuery.executionTime"
              type="date"
              aria-label="Pick a time"
              placeholder="Pick a time"
              style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col :span="2">
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
      </el-col>
      <el-col :span="2">
        <el-form-item>
          <el-button type="info" @click="reset">重置</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</div>
  <div>
    <!-- 列表展示 -->
    <el-table :data="taskList" stripe table-layout="fixed" >
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="taskName" label="任务名称"></el-table-column>
      <el-table-column prop="taskContent" label="通知内容"></el-table-column>
      <el-table-column prop="taskStatus" label="激活状态"></el-table-column>
      <el-table-column prop="taskUserName" label="创建人"></el-table-column>
      <el-table-column prop="executionDate" label="执行日期"></el-table-column>
      <el-table-column prop="executionTime" label="执行时间"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column prop="updateTime" label="更新时间"></el-table-column>
      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default>
          <el-button link type="primary" size="small" @click="edit">编辑</el-button>
          <el-button link type="primary" size="small" @click="bandTask">订阅</el-button>
          <el-button link type="primary" size="small" @click="queryBandUser">订阅用户</el-button>
          <el-button link type="danger" size="small" @click="deleteTask">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import {reactive} from 'vue';
const  recordQuery = reactive({
  taskName:'',
  username:'',//任务创建人
  requestContent:'',
  taskResult:'',
  executionDate:'',
  executionTime:'',
  currentPage:1,
  pageSize:10,
  totalItem:0
})
</script>
  